<template>
  <div class="timeline-item">
    <div class="round"></div>
    <p class="timeline-p">{{time}}</p>
  </div>
</template>

<script setup name="TimelineTime">
import { CalendarAlt } from '@vicons/fa'

const Props = defineProps({
  time:{
    type: String,
    default: ""
  }
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.timeline-item {
  position: relative;
  padding: 10px 25px;
  width: 100%;
  height: 20px;
  border-left: 2px solid #49b1f5;
}
.round {
  position: absolute;
  left: calc(-4px);
  top: 50%;
  width: 6px;
  height: 6px;
  border: 3px solid #ff7242;
  background: #eee;
  border-radius: 50%;
  transition: all 0.5s ease-in-out;
}
.timeline-p {
  position: absolute;
  font-size: 20px;
  top: calc(50% - 10px);
}
.timeline-item:hover {
  .round {
    border: 3px solid #49b1f5;
  }
}
</style>
